/* 
  1.ChildrenProps:  
      <Child car='A系列'>children</Child>
      <Child><Child2/></Child> 
    Child组件中使用this.props.children获取标签体内容
  2.RenderProps
      <Child render={(name)=> <Child2 name={name}/>} />
    在使用Child组件时不确定组件内容，修改组件时只要改变此处返回组件Child2，不需要去修改
Child组件内容 ；类似于vue的插槽
    Child组件中使用this.props.render(name)获取Child2组件
*/
export default class Parent extends PureComponent {
  render() {
    return (
      <div className='parent'>
        <Child car='A系列'>children</Child>
        <Child><Child2/></Child>

        <Child render={(name)=> <Child2 name={name}/>} />
      </div> 
    )
  }
}
class Child extends PureComponent {
  state={name:'tom'}
  render() {
    const {name} = this.state
    return (
      <div className='child'>
        {/* props {car: "A系列", children: "children"} */}
        <h1>子组件{car}</h1>
        {/* {this.props.children} */}
{/* 在组件中预留位置调用RenderProps */}
        {this.props.render(name)}
        {/* <Child2 /> */}
      </div> 
    )
  }
}
class Child2 extends PureComponent {
  render() {
    return (
      <div className='child2'>
        <h3>子组件2接收的name：{this.props.name}</h3>
      </div> 
    )
  }
}